EL ESTI LO /* https ://dev .opera .com/articles/flexbox-basics/flexbox-example .html */ /* https ://www .w3 .org/TR/css-flexbox-1/ */ .wrapper { display : -webkit-box ; display : -moz-box ; display : -ms -flexbox ; display : -webkit-flex ; display : flex; -webkit-flex-flow : row wrap; flex-flow : row wrap; font-weight : bold; text-align : center ; } .wrapper > * { padding : lOpx ; flex : 1 100%; } #header { flex : 1 1 100%; padding : 0 .9em; } .footer { margin : 7%; padding : O rem 3rem O rem; background : #aaeeff; flex : 1 1 100% ; order : 4; background : -webkit -linear-gradient( top, #aaeeff, #ffffff 20%, #ffffff 80%, #aaeeff ) ; background : -moz-linear-gradient( left, #ffffff, #aaeeff 20%, #aaeeff 80%, #ffffff ) ; background : -o-linear-gradient( top, #aaeeff , #ffffff 20%, #ffffff 80%, #aaeeff ) ; background : linear-gradient( top, #aaeeff, #ffffff 20%, #ffffff 80%, #aaeeff ) ; } .main { } text-align : left ; flex : 58%; order : 2; .aside2 { flex : 18%; order : 3; } aside section h2 { color : #0080FF; } #contactos{ display : -moz-flex; flex-flow : row wrap; } .contact { display : -mo z-flex; flex-flow : column; } html { background : -webkit-gradient( linear, left top , right top , from (#aaeeff), to(#ffffff) ) ; background : -webkit- linear-gradient( left, #aaeeff , #ffffff 20%, #ffffff 80%, #aaeeff ) ; background : -mo z-linear-gradient( left, #aaeeff, #ffffff 20%, #ffffff 80%, #aaeeff ) ; background : -o-linear-gradient ( left, #aaeeff , #ffffff 20%, #ffffff 80%, #aaeeff ) ; background : linear-gradient ( left, #aaeeff , #ffffff 20%, #ffffff 80%, #aaeeff ) ; } footer { display : -webkit-flex ; -webkit-flex-flow : row wrap; -webkit-align-items : stretch ; display : -moz-flex; -moz-flex-flow : row wrap; -moz-align-iterns : stretch ; display : -ms-flex; -ms-flex-flow : row wrap ; -ms-align-items : stretch; display : flex; flex-flow : row wrap ; align-iterns : stretch ; } #first { -webkit-flex : 1 O 7rern ; -moz-flex : 1 O 7rem ; -ms-flex : 1 O 7rem; flex : 1 O 7rem ; } #second { -webkit-order : 1; -webkit-flex : 2 O 8rern ; -moz-order : 1; -moz-flex : 2 O 8rem ; -ms-order : 1; -ms-flex : 2 O 8rem; order : 1; flex : 2 O 8rem; } footer div { rnargin : lrem 0 .5rem ; background : rgba(0,0,0,0.05); padding : 0 .5rem; border-radius : lrem; box-shadow : inset lpx lpx 3px black; position : relative; text-align : left; } footer div h2 { color : white ; text-align : center ; } hl' h2 { font-farnily : 'Indie Flower ', rnargin : 0.5rern O 0.5rern O ; cursi• ve; } hl { } h2{ } body { font-size : 3rern; text-shadow : 3px 3px 5px black; color : #0080FF; font-size : 1.2rern ; text-shadow : lpx lpx 2px black; padding : O 0.15rern; /*padding : 2ern ;*/ font-farnily : sans-serif ; width : 70%; rnargin : O auto ; position : relative; font-size : 62.5%; padding-bottorn : 12rern; background : -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1) 5%, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%); background : -rnoz-linear-gradient(left, rgba(255,255,255,0), rgba (255,255,255,1) 5%, rgba (255,255,255,1) 95%, rgba (255,255,255,0) 100%); background : -rns-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1) 5%, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%); background : -o-linear-gradient (left, rgba(255,255,255,0), rgba (255,255,255,1) 5%, rgba (255,255,255,1) 95%, rgba (255,255,255,0) 100%); background : linear-gradient (to right, rgba (255,255,255,0), rgba (255,255,255,1) 5%, rgba (255,255,255,1) 95%, rgba (255,255,255,0) 100%); }